<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="root" value="${pageContext.request.contextPath}"></c:set>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link href="${root}/static/css/bootstrap.min.css" rel="stylesheet"
	type="text/css" />
<link href="${root}/static/css/treeview.min.css" rel="stylesheet"
	type="text/css" />
<script type="text/javascript" src="${root}/static/js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="${root}/static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${root}/static/js/treeview.min.js"></script>
<script type="text/javascript" src="${root}/static/js/vue.min.js"></script>
<script type="text/javascript" src="${root}/static/js/axios.min.js"></script>
<script type="text/javascript">
	$(function() {
		var url = "${root}/menu/tree";
		$.ajax({
			async : false,
			type : "get",
			data : {},
			dataType : "json",
			url : url,
			success : function(res) {
				$("#tree").treeview({
					data : res
				});
			},
			error : function() {
				alert('网络延时 请重试');
			}
		});

		$("#tree")
				.on(
						"nodeSelected",
						function(event, e) {
							var murl = e.route;
							var mtip = e.tip;
							var mname = e.text;

							if (mtip.length == 0 || $("#" + mtip).length == 1) {
								return;
							}

							$(".nav-tabs li").removeClass("active");
							var li = $('<li class="active"></li>');
							var a = $('<a></a>');
							var span1 = $('<span style="cursor:pointer" href="#'+mtip+'">'
									+ mname + '</span>');
							var span2 = $('<span style="cursor:pointer"> &times;</span>');
							a.append(span1);
							a.append(span2);
							li.append(a);
							li.appendTo($(".nav-tabs"));

							$(".tab-content div").removeClass("in")
									.removeClass("active");
							var div = $('<div id="'+mtip+'" class="tab-pane fade in active"></div>');
							var iframe = $('<iframe src="${root}'
									+ murl
									+ '" frameborder="0" style="width: 100%; height: 500px;"></iframe>')
							div.append(iframe);
							div.appendTo($(".tab-content"));

							span1.click(function() {
								var href = $(this).attr("href");
								$('.nav-tabs span[href="' + href + '"]').tab(
										'show');
							});

							span2
									.click(function() {
										$("#" + mtip).remove();
										$(this).parents("li").remove();

										$(".nav-tabs li").removeClass("active");
										$('.nav-tabs li:first').addClass(
												"active");
										$(".tab-content div").removeClass("in")
												.removeClass("active");
										$("#welcome").addClass("in").addClass(
												"active");
									});
						});

		$("#cgpic")
				.click(
						function() {
							$("#img")
									.attr(
											"src",
											'/upload${root}/user-<shiro:principal property="urid"/><shiro:principal property="urpic"/>?'
													+ Math.random());
							$("#picmodal").modal('show');
						});

		$("#file").change(
				function() {
					var fileObj = $(this)[0];
					if (fileObj && fileObj.files && fileObj.files[0]) {
						var webURL = window.URL || window.webkitURL;
						$("#img").attr("src",
								webURL.createObjectURL(fileObj.files[0]));
					}
				});

		$("#picsubmit").click(function() {
			var file = $("#myfile")[0].files[0];
			if (file.size == 0) {
				alert("文件不能为空");
			} else if (file.size > 33554432) {
				alert("文件大小超过32MB")
			} else {
				var fd = new FormData();
				fd.append("myfile", file);
				$.ajax({
					type : "POST",
					url : "${root}/user/cgpic",
					contentType : false,
					processData : false,
					data : fd,
					dataType : "json",
					success : function(res) {
						alert(res.message);
						location.href = "${root}/user/logout";
					},
					error : function() {
						alert("网络延时");
					}
				});
			}
		});

		$("#cgpwd").click(function() {
			$("#oldpwd").val("");
			$("#newpwd").val("");
			$("#repwd").val("");
			$("#pwdmodal").modal('show');
		});

		$("#pwdsubmit").click(function() {
			var oldpwd = document.getElementById("oldpwd");
			if (oldpwd.validity.valueMissing) {
				oldpwd.setCustomValidity("原密码不能为空");
			} else if (oldpwd.value.length < 5) {
				oldpwd.setCustomValidity("原密码不能少于5位");
			} else {
				oldpwd.setCustomValidity("");
			}

			var newpwd = document.getElementById("newpwd");
			if (newpwd.validity.valueMissing) {
				newpwd.setCustomValidity("新密码不能为空");
			} else if (newpwd.value.length < 5) {
				newpwd.setCustomValidity("新密码不能少于5位");
			} else if (newpwd.value == oldpwd.value) {
				newpwd.setCustomValidity("新密码不能与原密码相同");
			} else {
				newpwd.setCustomValidity("");
			}

			var repwd = document.getElementById("repwd");
			if (repwd.validity.valueMissing) {
				repwd.setCustomValidity("确认密码不能为空");
			} else if (repwd.value != newpwd.value) {
				repwd.setCustomValidity("两次密码输入不一致");
			} else {
				repwd.setCustomValidity("");
				var url = "${root}/user/cgpwd";
				var data = {
					"oldpwd" : oldpwd.value,
					"newpwd" : newpwd.value
				};
				$.post(url, data, function(res) {
					alert(res.message);
					if (res.code == 200) {
						location.href = "${root}/user/logout";
					}
				}, "json");
			}

		});
	});
</script>
</head>
<body>
	<div id="app" class="container-fluid" style="margin-top: 10px;">
		<div class="col-md-2">
			<img class="img-circle img-thumbnail"
				style="width: 100px; height: 100px; margin-left: 40px;"
				src="/upload${root}/user-<shiro:principal property="urid"/><shiro:principal property="urpic"/>?Math.random()"
				title="" />
			<ul class="list-unstyled"
				style="margin-left: 45px; margin-top: 10px;">
				<li class="dropdown"><a href="#" data-toggle="dropdown"> <shiro:principal
							property="urnamezh"></shiro:principal>- <shiro:principal
							property="urenamezh"></shiro:principal> <span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a id="cgpwd" href="javascript:void(0);">更改密码</a></li>
						<li><a id="cgpic" href="javascript:void(0);">更改头像</a></li>
						<li class="divider"></li>
						<li><a href="${root}/user/logout">安全退出</a></li>
					</ul></li>
			</ul>
			<div id="tree" class="treeview"></div>
		</div>
		<div class="col-md-10">
			<marquee style="margin-top: 10px;">
				<span v-for="n in news" v-if="n.nowTime > n.nsbegin && n.nowTime < n.nsstop" class="text-info"
					style="margin-left: 20px">{{n.nsinfo}}</span>
			</marquee>
			<ul class="nav nav-tabs" style="margin-top: 10px;">
				<li class="active"><a href="#welcome">欢迎</a></li>
			</ul>
			<div class="tab-content">
				<div id="welcome" class="tab-pane fade in active">
					<iframe src="${root}/user/welcome" frameborder="0"
						style="height: 600px; width: 100%;"></iframe>
				</div>
			</div>
		</div>
	</div>
	<div id="pwdmodal" class="modal">
		<div class="modal-dialog" data-backdrop="static">
			<div class="modal-content">
				<div class="modal-header">
					<button class="close" data-dismiss="modal">&times;</button>
					<h4 id="title">修改密码</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" action="" onsubmit="return false"
						method="post">
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">原密码:</label>
							<div class="col-sm-4">
								<input type="password" id="oldpwd" class="form-control" required
									placeholder="请输入原密码" />
							</div>
							<p class="col-sm-6 help-block">原密码不能为空</p>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">新密码:</label>
							<div class="col-sm-4">
								<input type="password" id="newpwd" class="form-control" required
									placeholder="请输入新密码" />
							</div>
							<p class="col-sm-6 help-block">新密码不能为空</p>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">密码确认:</label>
							<div class="col-sm-4">
								<input type="password" id="repwd" class="form-control" required
									placeholder="请再次输入新密码" />
							</div>
							<p class="col-sm-6 help-block">密码确认不能为空</p>
						</div>
						<div class="form-group">
							<div class="col-sm-4 col-sm-offset-2">
								<input id="pwdsubmit" type="submit" class="btn btn-default"
									value="确定" /> <input type="reset" class="btn btn-default"
									value="取消" />
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	<div id="picmodal" class="modal">
		<div class="modal-dialog" data-backdrop="static">
			<div class="modal-content">
				<div class="modal-header">
					<button class="close" data-dismiss="modal">&times;</button>
					<h4 id="title">修改头像</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" action="" onsubmit="return false"
						method="post">
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">图片预览:</label>
							<div class="col-sm-10">
								<img id="img" class="img-circle img-thumbnail"
									style="width: 200px; height: 200px;" src="" />
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">头像:</label>
							<div class="col-sm-10">
								<input type="file" id="myfile" class="form-control" required
									placeholder="请选择图片"
									accept="image/bmp,image/png,image/jpg,image/jpeg" />
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-4 col-sm-offset-2">
								<input id="picsubmit" type="submit" class="btn btn-default"
									value="确定" /> <input type="reset" class="btn btn-default"
									value="取消" />
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		new Vue({
			el : '#app',
			data : {
				timer : '',
				mytime : 100000000,
				news : [],
			},
			methods : {
				getNewList : function() {
					var self = this;
					var url = "${root}/index/newslist";
					axios.get(url).then(function(res) {
						self.news = res.data
					});
				},
			},
			mounted : function() {
				this.timer = setInterval(this.getNewList, this.mytime);
			},
		    beforeDestroy: function() {
			    clearInterval(this.timer);
		    }
		});
	</script>
</body>
</html>